<template>
  <div class="app_container">
    <h3 class="module_head">消费记录查询-消费者</h3>
    <div class="filter-container" style="margin: 0 auto 20px 0;">
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        style="margin-right: 10px; width: 300px"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-select
        placeholder="消费类型"
        style="margin-right: 10px; width: 130px"
        v-model="value"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search">
        筛选
      </el-button>
    </div>
    <el-table
        :data="recordTableData"
        border
        fit
        highlight-current-row
        height="350"
        :default-sort = "{prop: 'createTime', order: 'descending'}"
        class="record_table">
        <el-table-column
          prop="serialNum"
          label="流水号"
          sortable
          width="130">
        </el-table-column>
        <el-table-column
          prop="occurTime"
          label="消费发生时间"
          sortable
          width="170">
        </el-table-column>
        <el-table-column
          prop="consumptionType"
          label="消费类型"
          width="100">
        </el-table-column>
        <el-table-column
          prop="previousBalance"
          label="消费前金额"
          width="100">
        </el-table-column>
        <el-table-column
          prop="cash"
          label="消费金额"
          sortable
          width="120">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="消费后金额"
          width="100">
        </el-table-column>
        <el-table-column
          prop="timePeriod"
          label="餐类"
          width="60">
        </el-table-column>
        <el-table-column
          prop="terminalName"
          label="设备名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="设备上报时间"
          sortable>
        </el-table-column>
      </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'UserCardConsumptionRecord',
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      options: [{
        value: '',
        label: '全部'
      }, {
        value: '普通消费',
        label: '普通消费'
      }, {
        value: '人脸消费',
        label: '人脸消费'
      }, {
        value: '无效交易',
        label: '无效交易'
      }, {
        value: '消费冲正',
        label: '消费冲正'
      },{
        value: '消费撤销',
        label: '消费撤销'
      }, {
        value: '其他',
        label: '其他'
      }],
      value: undefined,
      currentPage: 4,
      recordTableData: [{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }, {
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      },{
        serialNum: 2112547542875,
        occurTime: "2017-03-13 23:59:59",
        consumptionType: "消费冲正",
        previousBalance: 32,
        cash: 10,
        balance: 22,
        timePeriod: "午餐",
        createTime: "2017-03-13 23:59:55",
        terminalName: "消费机1",
        cardNumber: "34343445",
        personName: "张三",
        deptName: "人力"
      }],
    };
  }
}
</script>

<style scoped>
.app_container{
  padding: 20px;
}
.module_head{
  margin-top: 0;
}
.record_table{
  width: 100%;
  margin-bottom: 20px;
}
</style>
